<template>
	<view class="pop-wrap"  :animation='animationData'>
		<view class="pop-content">
			<view class="pop-title">
				<view class="pop-title__t">{{title}}</view>
				<image class="pop-title__close" :src="popCloseIcon" @click="popCenterClose(false)"></image>
			</view>
			<scroll-view class="pop-body" :scroll-y="true">
				<rich-text class="rich-text" :nodes="text"></rich-text>
			</scroll-view>
			
			<view class="pop-center" @click="popCenterClose">确定</view>
		</view>
	</view>
</template>

<script>
	// 中间弹出的遮罩层
	import popCloseIcon from '../static/common/close.png'
	export default{
		props:{
			isShow: Boolean,
			title: String,
			text: String
		},
		data() {
			return{
				animationData: {},
				popCloseIcon,
			}
		},
		mounted() {
			
		},
		methods:{
			popCenterClose() {
				this.$emit('popCenterClose', false)
			}
		},
		watch:{
			isShow: function() {
				let animation = uni.createAnimation({
					duration: '400',
					timingFunction:'ease-out'
				})
				if(this.isShow) {
					this.animationData = animation.opacity(1).top(0).scale(1,1).step().export()
				}else{
					this.animationData = animation.opacity(0).top('100%').scale(0,0).step().export()
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../app.less');
	.pop-wrap {
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		top:100%;
		z-index: 99;
		.flex-base;
		justify-content: center;
		transform: scale(0,0);
	}
	.pop-content {
		background-color: @f;
		.br;
		width: 90%;
		max-height: 80%;
		padding: 20upx;
		box-sizing: border-box;
	}
	
	.pop-title {
		.flex-base;
		position: relative;
		.pop-title__t {
			flex-grow: 2;
			margin-right: 20upx;
			margin-bottom: 20upx;
			text-align: center;
			.f30;
		}
		.pop-title__close {
			width: 30upx;
			height: 30upx;
			border-radius: 100%;
			position: absolute;
			right: -10rpx;
			top: -8rpx;
		}
	}
	.pop-body{
		max-height: 600upx;
		text-align: justify;
		overflow: hidden;
	}
	.pop-center{
		height: 80upx;
		width: 100%;
		margin-bottom: 30upx;
		margin-top: 20upx;
		background: @font-orange-color;
		text-align: center;
		line-height: 80upx;
		color:@f;
		.br;
	}
	
	
</style>
